// 获取元素
function $(selecor){
    var likeArray = document.querySelectorAll(selecor)
    if (likeArray.length === 1) {
        return likeArray[0]
    } else {
        return likeArray
    }
}

// console.log( dataIndex )// 首页要渲染的数据

// 渲染头部通告的数据
var list = document.querySelector('.notice .list')
var tmp1 = ''
dataIndex.notice.forEach(function (item){
    // var newLi = document.createElement('li')// 创建一个li
    // newLi.innerText = item// 给li赋值
    // list.appendChild(newLi)// 将li添加到list中

    tmp1 += '<li>'+item+'</li>'
})
list.innerHTML = tmp1

// 渲染头部导航分类数据
var header_nav = document.querySelector('.header_nav')
var tmp2 = ''
dataIndex.navs.forEach(function (item){
    // tmp2 += '<li><a href="#"><img src="'+item.icon+'" alt=""><h3>'+item.title+'</h3></a></li>'

    // tmp2 += '<li>'+
    //             '<a href="#">'+
    //                 '<img src="'+item.icon+'" alt="">'+
    //                 '<h3>'+item.title+'</h3>'+
    //             '</a>'+
    //         '</li>'

    tmp2 += `
        <li>
            <a href="./list.html?id=${item.class}">
                <img src="${item.icon}" alt="">
                <h3>${item.title}</h3>
            </a>
        </li>
    `
})
header_nav.innerHTML = tmp2

// 渲染轮播图数据
var imgs = $('.banner .imgs')
var tmp3 = ''
var pages = ''
dataIndex.banner.forEach(function (item,index){
    tmp3 += `<div style="background-image:url(${item.imgurl});"></div>`

    pages += `<li>${index+1}</li>`
})
imgs.innerHTML = tmp3
$('.pages').innerHTML = pages

// 渲染三个新品数据
var new_goods = $('.new_goods')
var tmp4 = ''
dataIndex.Mavic.new.forEach(function (item){
    tmp4 += `
        <div class="goods">
            <a href="./detail.html?id=${item.id}">
                <img class="goods_img1" src="${item.imgbg1}" alt="">
                <img class="goods_img2" src="${item.imgbg2}" alt="">
                <h1>${item.title}</h1>
                <h5>${item.cnt}</h5>
                <p>${item.description}</p>
                <div>￥ ${item.price}</div>
                <img class="goods_img3" src="${item.imghover}" alt="">
            </a>
        </div>
    `
})
new_goods.innerHTML = tmp4
new_goods.lastElementChild.style.marginRight = 0

// 渲染Mavic数据
var main = dataIndex.Mavic.main
$('.mavic-new').innerHTML = `
    <a href="./detail.html?id=${main.id}" class="left">
    <img src="${main.imgurl}" alt="">
    <div>
        <h3>${main.title}</h3>
        <p>${main.description}</p>
        <span>￥ ${main.price}</span>
    </div>
    </a>
    <video class="right" src="${main.video}" muted autoplay loop></video>
`

var list_wrap = $('.list-wrap')
var tmp5 = ''
dataIndex.Mavic.list.forEach(function (item){
    tmp5 += `
        <a href="./detail.html?id=${item.id}" class="item">
            <img src="${item.imgbg}" alt="">
            <h3>${item.title}</h3>
            <p>￥ ${item.price}</p>
            <div class="hover">
                <img src="${item.imghover}" alt="">
                <p>${item.description}</p>
            </div>
        </a>
    `
})
list_wrap.innerHTML = tmp5

// 头部通告轮播效果
var list = $('.notice .list')
var lis = $('.notice .list li')// 复制之前lis的长度为3

// 复制第一个li放到list最后面
var firstLi = lis[0].cloneNode(true)
list.appendChild(firstLi)// 此时lis的长度为3，但是页面中有4个li

var timer1 // 保存计时器id
var timer2 // 保存计时器id
var current = 0 // 记录当前list的top值

autoPlay1()// 进入页面自动播放

// 自动播放的函数
function autoPlay1(){
    // 每隔3秒播放下一条通告
    // 先清除计时器，再启动计时器
    clearInterval(timer1)
    timer1 = setInterval(function (){
        move() // 播放下一条通告
    },3000)
}

// 播放下一条通告的函数
function move(){
    // 获取一个li的高度
    var liHeight = lis[0].clientHeight

    // 临界值判断
    if (current === -liHeight*lis.length) {
        current = 0
        list.style.top = '0px'
    }

    // 先清除计时器，再启动计时器
    clearInterval(timer2)
    timer2 = setInterval(function (){
        current -= 2
        list.style.top = current + 'px'
        // 每走一个li的高度时，停止运动
        if (Math.abs(current)%liHeight === 0) {
            clearInterval(timer2)
        }
    },20)
}

// 轮播图-透明度切换
// 1.所有图片定位叠在一起，层级一样（都是1）
// 2.所有图片初始透明度为0/0.1
// 3.要显示的图片提高层级，透明度从0/0.1过渡1
// 4.上一张图片恢复初始样式 1 2

// 缓存要操作的元素
var divs = $('.imgs div')
var prev = $('.prev')
var next = $('.next')
var nums = $('.pages li')

// 计时器id
var timer3
// 当前展示图片的索引
var showIndex = 0
// 初始状态：展示第一张图片
divs[showIndex].className = 'show' // 提高层级 10
divs[showIndex].style.opacity = 1 // 透明度为1
nums[showIndex].className = 'active' // 添加选中状态

autoPlay2()// 进入页面自动播放

// 自动播放的函数
function autoPlay2(){
    // 每隔3秒播放下一张图片
    // 先清除计时器，再启动计时器
    clearInterval(timer3)
    timer3 = setInterval(function (){
        moveNext()// 播放下一张图片
    },3000)
}

// 点击next切换下一张图片
next.onclick = function (){
    // 停止自动播放
    clearInterval(timer3)
    // 播放下一张图片
    moveNext()
    // 启动自动播放
    autoPlay2()
}

// 点击prev切换上一张图片
prev.onclick = function (){
    // 停止自动播放
    clearInterval(timer3)
    // 播放上一张图片
    movePrev()
    // 启动自动播放
    autoPlay2()
}

// 点击页码数字时切换图片
for (var i = 0; i < nums.length; i++){
    // 给每一个li添加一个属性，保存它的索引
    nums[i].index = i
    // nums[0].index = 0
    // nums[1].index = 1
    // nums[2].index = 2
    nums[i].onclick = function (){
        // 停止自动播放
        clearInterval(timer3)

        // 切换到某张图片
        // this -> 你点击的那个li元素

        // 1.上一张图片恢复初始样式
        nums[showIndex].className = '' // 去掉选中状态
        divs[showIndex].className = '' // 降低层级 1
        divs[showIndex].style.opacity = 0.1 // 透明度为0.1

        // 2.当前要展示图片的索引
        showIndex = this.index

        // 3.选中的图片显示
        nums[showIndex].className = 'active' // 添加选中状态
        divs[showIndex].className = 'show' // 提高层级 10
        fadeIn(divs[showIndex])// 图片淡入

        // 启动自动播放
        autoPlay2()
    }
}

// 播放下一张图片的函数
function moveNext(){
    // 1.上一张图片恢复初始样式
    nums[showIndex].className = '' // 去掉选中状态
    divs[showIndex].className = '' // 降低层级 1
    divs[showIndex].style.opacity = 0.1 // 透明度为0.1

    // 2.当前图片的索引自增
    showIndex++
    if (showIndex >= divs.length) {
        showIndex = 0 // 最后一张图片的下一张是第一张图片
    }

    // 3.下一张图片显示
    nums[showIndex].className = 'active' // 添加选中状态
    divs[showIndex].className = 'show' // 提高层级 10
    fadeIn(divs[showIndex])// 下一张图片淡入
}

// 播放上一张图片的函数
function movePrev(){
    // 1.上一张图片恢复初始样式
    nums[showIndex].className = '' // 去掉选中状态
    divs[showIndex].className = '' // 降低层级 1
    divs[showIndex].style.opacity = 0.1 // 透明度为0.1

    // 2.当前图片的索引自减
    showIndex--
    if (showIndex < 0) {
        showIndex = divs.length-1 // 第一张图片的上一张是最后一张图片
    }

    // 3.上一张图片显示
    nums[showIndex].className = 'active' // 添加选中状态
    divs[showIndex].className = 'show' // 提高层级 10
    fadeIn(divs[showIndex])// 上一张图片淡入
}

// 图片淡入的函数
function fadeIn(dom){
    // 获取dom当前的透明度值0.1 * 100
    var current = getComputedStyle(dom).opacity * 100
    // dom元素透明度过渡的目标值1 * 100
    var target = 1 * 100

    // 先清除计时器，再启动计时器
    clearInterval(dom.timer)
    dom.timer = setInterval(function (){
        // dom的透明度 从 current 过渡到 target
        current += 3
        // 边界值判断
        if (current >= target) {
            clearInterval(dom.timer)
        } else{
            // 改变dom的透明度
            dom.style.opacity = current/100
        }
    },20)
}

// 窗口失去焦点时 停止自动播放
window.onblur = function (){
    clearInterval(timer1)
    clearInterval(timer3)
}
// 窗口获得焦点时 启动自动播放
window.onfocus = function (){
    autoPlay1()
    autoPlay2()
}